<template>
  <div class="temp">
    <div class="section">
      <div class="location">
        <span>当前位置：</span>
        <a href="/index.html">首页</a> &gt;
        <a href="javascript:;">支付中心</a>
      </div>
    </div>

    <div class="section">
      <div class="wrapper">
        <div class="bg-wrap">
          <div class="nav-tit pay">
            <a href="javascript:;" class="selected">支付中心</a>
          </div>
          <div class="form-box payment">
            <div class="el-row">
              <div class="el-col el-col-16">
                <div class="el-row">
                  <div class="el-col el-col-12">
                    <dl class="form-group">
                      <dt>订 单 号：</dt>
                      <dd>{{goodlist.order_no}}</dd>
                    </dl>
                  </div>
                  <div class="el-col el-col-12">
                    <dl class="form-group">
                      <dt>收货人姓名：</dt>
                      <dd>{{goodlist.accept_name}}</dd>
                    </dl>
                  </div>
                </div>
                <div class="el-row">
                  <div class="el-col el-col-12">
                    <dl class="form-group">
                      <dt>送货地址：</dt>
                      <dd>{{goodlist.area}}{{goodlist.mobile}}
                      </dd>
                    </dl>
                  </div>
                  <div class="el-col el-col-12">
                    <dl class="form-group">
                      <dt>手机号码：</dt>
                      <dd>电话暂无</dd>
                    </dl>
                  </div>
                </div>
                <div class="el-row">
                  <div class="el-col el-col-12">
                    <dl class="form-group">
                      <dt>支付金额：</dt>
                      <dd>{{goodlist.order_amount}} 元</dd>
                    </dl>
                  </div>
                  <div class="el-col el-col-12">
                    <dl class="form-group">
                      <dt>支付方式：</dt>
                      <dd>在线支付</dd>
                    </dl>
                  </div>
                </div>
                <div class="message">
                  <span>备&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;注：</span>
                  <span>{{goodlist.message}}</span>
                </div>
              </div>
              <div class="el-col el-col-8">
                <div id="container">
                  二维码图片
                  <canvas width="400" height="400"></canvas>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

  </div>
  </div>
</template>
<script>
    // 引入二维码jq的插件
    import '../../../../statics/site/js/jqplugins/qr/jqueryqr.js';


    export default {
        data() {
            return {
                orderid: this.$route.params.ouderID, //订单ID
                goodlist: {}, //API请求回来的数据
                interval: null, //装定时器,用来给清除定时器时用,
            }
        },
        created() {
            this.getgoodslist();
        },
        mounted() {
            // 支付二维码
            $("#container").erweima({
                label: '一批黑马支付', //文字二维码
                text: '/site/paybutton/' + this.orderid, //最后扫出来的结果
            });

            // 写个定时器,当用户用手机扫码了的时候,后台返回的res.data.message[0].status==2的时候,也就是已付款的时候,应该自动跳转到支付成功页面,而不是一直在这里,
            // 也就是5秒做一个监控
            this.interval = setInterval(() => {
                var url = '/site/validate/order/getorder/' + this.orderid;
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        return this.$message.error(res.data.message);
                    }
                    //  成功 如果支付成功跳转到监控页面
                    if (res.data.message[0].status == 2) {
                        this.$router.push({
                            name: 'paysuccess'
                        })
                    }
                })
            }, 5000)
        },
        beforeDestroy() { //页面准备销毁的时候,也就是定时器起作用了,那么就应该把定时器清除
            if (this.interval) {
                clearInterval(this.interval);
            }
        },
        methods: {
            // 根据订单ID获取订单信息
            getgoodslist() {
                var url = '/site/validate/order/getorder/' + this.orderid;
                this.$http.get(url).then(res => {
                    if (res.data.status == 1) {
                        return this.$message.error(res.data.message);
                    }
                    //  成功 则渲染
                    this.goodlist = res.data.message[0];


                })
            }
        }
    }
</script>
<style>
    .form-box .form-group dt {
        width: 30% !important;
    }
</style>